<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link href="../css/reset.css" rel="stylesheet" />
		<link href="../css/jquery.beautifyFormItem.css" rel="stylesheet" />
		
		<style type="text/css">
			#dropdownlist {
				float: left;
			}
		</style>
	</head>
	<body>
		<form style="width:100px">
			<div id="dropdownlist"></div>
			<div style="float: left">sdfsdf</div>
		</form>
		
		<script type="text/javascript" src="../js/jquery/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.23.custom.min.js"></script>
		<script type="text/javascript" src="../js/jquery-plugin/jquery.extension.js"></script>
		<script type="text/javascript" src="../js/jquery-plugin/jquery.beautifyFormItem.js"></script>
		
		<script type="text/javascript">
			
			$(document).ready(function() {
				
				$('#dropdownlist').dropdownList({
					data: [{label:'label1', value:'value1'}, {label:'label2', value:'value2'}]
					, showAllOption: true // 是否显示全部选项
					, allOptionData: {label: 'Select All', value:'all'} // 当showAllOption为true时,可设置全部选项的数据
					, className: 'dropdownlist'
				})
				
			});
			
		</script>
	</body>
</html>
